<template>
    <div id="player">
      <!-- <h2 class="title">黑云音乐</h2> -->
      <MySwipper></MySwipper>
      <div class="search">
        <!-- v-model绑定关键词进行搜索 -->
        <input type="text"  v-model="keyword"  @keyup.enter="gotoResult"/>
        <!-- -->
        <button >
          <span class="iconfont icon-search" @click="gotoResult"></span>
        </button>
      </div>
      <div class="tab-wrapper">
        <!-- tab栏 -->
        <div class="tab-bar">
          <router-link to="/results" class="bar-item" active-class="active">
            搜索结果
          </router-link>
          <router-link to="/player" class="bar-item" active-class="active">
            歌曲播放
          </router-link>
          <router-link to="/mv" class="bar-item" active-class="active">
            mv
          </router-link>
          <router-link to="/comment" class="bar-item" active-class="active">
            歌曲评论>
          </router-link>
          <a class="bar-item" active-class="active">
            推荐歌曲
          </a>
        </div>
        <!-- 对应的内容区域 -->
        <div class="tab-content">
   
        </div>
      </div>
    </div>
</template>

<script>
// MySwipper 作为轮播图作为Search的组件
import MySwipper from "./MySwipper.vue"
// 导入歌词搜索结果页面
import Results from "../views/Results.vue"
// 导入mv页面
import Mv from "../views/Mv.vue"
// 导入评论页面
import Comment from "../views/Comment.vue"
import router from '@/router/index.js'

export default {
 data(){
    return {
       // 音乐搜索关键词
       keyword:"",
    }
  },
  components:{
    MySwipper,
    // 这里可能里理解错了， 不要results,comment,mv也没问题，不是子组件
    // Results,

  },
  methods:{
      gotoResult(){
        // console.log("this.keyword:"+this.keyword)
        router.push("/results/"+this.keyword)
      }
  }
}
</script>

<style scoped>
    @import "@/assets/css/index.css";
</style>

